<template>
  <div class="box">
    <!-- 头部信息 -->
    <div class="headerInfo">
      <!-- 头像 -->
      <div class="userHeader">
      <router-link :to="'/personcenter/'+node.userId">
        <img
          style="border-radius: 50%"
          width="100%"
          height="100%"
          :src="node.userHeader"
          alt=""
        />
      </router-link>
        <img src="@/assets/V.png" v-show="node.vip" alt="" />
      </div>
      <!-- 信息 -->
      <div class="userMessage">
        <p>{{node.userName}}</p>
        <p style="color: #d9d8d4; font-size: 10px; margin-top: 5px">
          <span>发布时间：{{node.nodeTime}}</span>
          <span style="margin-left: 10px" class="new">🔥:{{node.nodeLook}}</span>
        </p>
      </div>
    </div>
    <!-- 中间内容 -->
    <router-link :to="'/detail/'+node.nodeId">
      <div class="content">
        <p style="margin-bottom: 10px">{{node.nodeMess}}</p>
        <div v-if="node.arrImgs.length>=1">
          <el-image
          style="width:150px;margin-left:10px"
          lazy
            v-for="item in node.arrImgs" :key="item.index"
            width="150"
            height="150"
            :src="item+'!shuiy'"
            alt="waterghost"
          ></el-image>
        </div>
      </div>
    </router-link>
    <!-- 底部功能 -->
    <div class="method">
      <div class="fx" v-show="fxFlag">
        <img width="100%" height="100%" :src="eimg">
      </div>
      <p style="text-align: right">
        <a href="javascript:;"  v-if="isMy&&dataNode.collentState==true" @click="del" class="el-icon-delete dz" style="margin-right:10px"></a>
          <a href="javascript:;" @click="fx" class="el-icon-share dz" style="margin-right:10px"></a>
        <a href="javascript:;" @click="dz" :class="love?'el-icon-star-off '+'dz':'el-icon-star-on '+'dz'"
          ><span style="font-size: 10px">{{dataNode.nodeLike==-1?'':dataNode.nodeLike}}</span></a
        >
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props:["node","isMy"],
  data(){
    return{
      love:this.node.collentState,
      dataNode:this.node,
      eimg:null,
      fxFlag:false
    }
  },
  methods:{
    fx(){
      this.fxFlag=!this.fxFlag
      if(this.eimg==null){
      this.$http("http://api.tianapi.com/ewm/index?key=38cac4d4a77d17cfa1187e23de59f2ea&text=http://106.55.181.109/detail/"+this.node.nodeId).then(va=>{
        this.eimg=va.data.newslist[0].text
      })
      }
    },
    // 收藏作品
    dz(){
      this.love = !this.love
      var state = this.love?-1:1
      this.$http.put("/collent/collentnode/"+this.node.nodeId+"/"+state).then(va=>{
        if(va!=null){
          this.$alert(va.data.message)
          if(va.data.code==200){
            this.dataNode.nodeLike=this.dataNode.nodeLike+state
          }else{
            this.love=true
          }
        }
      })
    },
    del(){
       this.$confirm('确认删除该图集，该操作确认后无法进行恢复, 是否继续?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        }).then(() => {  
        // 删除作品
          this.$http.delete("/node/delNode/"+this.node.nodeId).then(va=>{
            if(va.data.code==200){
              this.$alert("删除成功")
              this.$emit("del")
            }else{
              this.$alert(va.data.message)
            }
          })

        });

 
    }},
    mounted(){
         // 文章日期格式化
         var bb = new Date(this.node.nodeTime)
         var datee = bb.getFullYear()+"/"+bb.getMonth()+1+"/"+bb.getDate()+" "+bb.getHours()+":"+bb.getMinutes()+":"+bb.getSeconds()
         this.node.nodeTime=datee
                  
    }
  
};
</script>

<style scoped lang="less">
@keyframes new {
  0% {
    color: red;
  }
  100% {
    color: orange;
  }
}
.box {
  margin-bottom: 10px;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  padding: 15px;
  .headerInfo {
    width: 100%;
    height: 70px;
    // background: yellow;
    display: flex;
  }
  .content {
    width: 100%;
    height: auto;
    padding: 10px;
    p{
      width: 100%;
      height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    img {
      margin: 5px;
      
    }
  }
  .method {
    width: 100%;
    height: 50px;
    position: relative;
    // background: rgb(4, 112, 139);
    .dz {
      font-size: 25px;
      color: #ffcd35;
      text-align: right;
    }
  }

  .userHeader {
    padding: 10px;
    width: 70px;
    height: 100%;
    // background: pink;
    position: relative;
    float: left;
  }
  .userMessage {
    position: relative;
    width: 300px;
    height: 100%;
    // background: red;
    float: right;
    padding-top: 15px;
  }
  .del{
    position: absolute;
    right: 0px;
  }
}
.new {
  animation: new 1s infinite;
}

.userHeader > img:last-child {
  width: 20px;
  border-radius: 50%;
  bottom: 6px;
  right: 10px;
  position: absolute;
}
.fx{
  width: 100px;
  height: 100px;
  background: red;
  position:absolute;
  top: -110px;right: 0;
}
 @media  screen and (max-width: 500px) {
     .box{
         width: 100%;
     }
     .content>img{
         width: 60px !important;
         height: 60px !important;
     }
 }
</style>